<script setup>
  import { ref, nextTick } from 'vue'

  const isShowContent = ref(false)

  const inputRef = ref(null)

  const edit = () => {
    isShowContent.value = true
    console.log(inputRef.value); // null
    
    // 当你要修改数据后操作DOM 那么就用 nextTick 
    // 如果直接获取 此时DOM 还没有更新完（异步操作） 那么 inputRef 就还是原来的样子(null)
    // 就不能获得相对于的DOM
    nextTick(() => {
      inputRef.value.focus()
    })
  }
</script>

<template>
  <div class="title">
    <h3>标题</h3>
    <button @click="edit">编辑</button>
  </div>

  <div class="content" v-if="isShowContent">
    <input type="text" ref="inputRef"> 
    <button>确认</button>
  </div>
</template>


<style scoped>
  .title {
    display: flex;
    width: 200px;
    justify-content: space-between;
    align-items: center;
  }

</style>